<template>
	<div class="tabs-container">
		<!-- <div v-if="!tabs || tabs.length === 0" class="custom-skeleton-tab"></div> -->
		<SkeletonTabPlaceholder :loading="!tabs || tabs.length === 0" width="100%" height="35px" />
		<el-tabs v-model="activeTab" @tab-change="handleTabChange" class="tabs">
			<el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab.label" :name="tab.name">
				<template #label>
					<span class="font-bold">{{ tab.label }}</span>
					<span class="font-bold" v-if="showNumber">({{ tab.number || 0 }})</span>
				</template>
				<slot :name="tab.name"></slot>
			</el-tab-pane>
		</el-tabs>
		<!-- 只有 `showReturnButton` 为 true 时才显示按钮 -->
		<el-button v-if="showReturnButton" class="return-btn"
			@click="proxy.$tab.closeDetailOrGoBack('/jinko/importManagement/invoices/index', route)">返回</el-button>
	</div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { TabItem, TabsProps } from '@/pageTypes/invoices.ts'
const router = useRouter()
const route = useRoute()
const props = defineProps<TabsProps & {
	showReturnButton?: boolean; // 是否显示返回按钮
	showNumber?: boolean
}>();

const emit = defineEmits<{
	(e: 'update:modelValue', value: string): void;
	(e: 'tab-change', value: string): void;
}>();

const activeTab = ref<string>(props.modelValue);

// 监听 `activeTab` 变化，更新 `v-model`
watch(activeTab, (newVal) => {
	emit('update:modelValue', newVal);
});

// 触发 `tab-change` 事件
const handleTabChange = () => {
	emit('tab-change', activeTab.value);
};
</script>

<style scoped lang="scss">
.tabs-container {
	position: relative;
	display: flex;
	align-items: center;
}

.tabs {
	flex: 1;
}

.return-btn {
	position: absolute;
	right: 0;
	top: 0;
}

.custom-skeleton-tab {
	width: 100%;
	height: 35px;
	background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
	background-size: 400% 100%;
	animation: skeleton-loading 1.4s ease infinite;
	border-radius: 4px;
	box-sizing: border-box;
	margin-bottom: 12px; // 可选
}

@keyframes skeleton-loading {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}
</style>
